<template>
	<view class="index">
		<navBar :title="title" :icon="msgUrl"></navBar>
		<view class="i-content" :style="{top:barHeight+44+'px'}">
			<m-swiper :list="banner_list"></m-swiper>
			<m-tap :list="tapList"></m-tap>
			<m-notice :list="noticeList"></m-notice>
			<view class="i-shop">
				<view class="n-top">
					<view class="n-title">
						入驻商家
					</view>
					<view class="n-more" @tap="handleMore()">更多 >
					</view>
				</view>
				<view class="s-classify">
					<scroll-view class="c-one-box" :scroll-x="true">
						<view class="c-one" v-for="(item,index) in classify" :key="index" @tap="handleSelectOne(item)" :class="item.name===selectOneClassify ? 'activeOne' : ''">
							{{item.name}}
						</view>
					</scroll-view>
					<view class="c-two-box">
<!--						<view class="c-two " :class="selectTwoClassify ? '' : 'c-all'" @tap="handleSelectAll(all_item)">全部</view>-->
						<view class="c-two" v-for="(item,dex) in classifyTwo" :key="dex" :class="item.name===selectTwoClassify ? 'activeTwo' : ''"
						 @tap="handleSelectTwo(item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="s-shop">
					<view v-if="shopList.length===0">
						<MnoData :text_show="empty_text_show"></MnoData>
					</view>
					<view v-else class="s-s-box" v-for="(item,index) in shopList" :key="index" @tap="handleGoodsDetail(item)">
						<image class="b-img" :src="item.image"></image>
						<view class="b-con">
							<view class="b-c-name">{{item.name}}</view>
							<view class="b-c-stock_1">{{item.company_name}}</view>
							<view class="b-c-stock">库存:{{item.number}}</view>
						</view>
						<view class="b-ji">{{item.integral}}积分</view>
					</view>
				</view>
			</view>
			<m-bottom></m-bottom>
		</view>
	</view>
</template>

<script>
	import MSwiper from '@/components/m-swiper.vue'
	import MTap from '@/components/m-tap.vue'
	import MNotice from '@/components/m-notice.vue'
	import MnoData from '@/components/m-noData.vue'
	export default {
		name: 'home',
		data() {
			return {
				empty_text_show:false,
				banner_list: [],
				tapList: [{
					id:1,
					title: "关于我们",
					img_url: this.$mConfig.assetsPath+"static/img/guanyu.png"
				}, {
					id:2,
					title: "行业资讯",
					img_url: this.$mConfig.assetsPath+"static/img/xixun.png"
				}, {
					id:3,
					title: "新手帮助",
					img_url: this.$mConfig.assetsPath+"static/img/zhiyin.png"
				}, {
					id:4,
					title: "在线客服",
					img_url: this.$mConfig.assetsPath+"static/img/kefu_1.png"
				}],
				title: '首页',
				msgUrl: this.$mConfig.assetsPath+"static/img/shopCar.png",
				barHeight: getApp().globalData.mediaStatus,
				noticeList: [], // 公告
				classify: [],
				classifyTwo: [],
				selectOneClassify: '',
				selectTwoClassify: '',
				selectOneClassify_id: 0,
				selectTwoClassify_id: 0,
				shopList: [],
				all_item:{id:0, name:'全部'},
				page:0,
				is_load:0 // 是否还有更多数据可以请求
			}
		},
		components: {
			MSwiper,
			MTap,
			MNotice,
			MnoData
		},
		onShow() {
			this.getBannerList()
			this.getNoticeList()
			this.getBigTypeList()

		},
		onReachBottom() {
			if(this.is_load>0){
				uni.showLoading({})
				this.$store.commit("CHANGESHOWlOADING",true)
				this.page++
				setTimeout(()=>{
					this.getProductList()
					this.$store.commit("CHANGESHOWlOADING",false)
					uni.hideLoading()
				},1000)
			}
		},
		// mounted() {
		// 	this.getBannerList()
		// 	this.getNoticeList()
		// 	this.getBigTypeList()
		// },
		methods: {
			//获取banner列表
			async getBannerList(){
				let resData= await this.$apis.getBannerList()
				this.banner_list=resData.data.lists
			},
			//获取公告列表
			async getNoticeList(){
				let resData= await this.$apis.getNoticeList()
				this.noticeList=resData.data.lists.slice(0,2)
			},

			//获取一级分类
			async getBigTypeList(){
				let resData= await this.$apis.getBigTypeList()
				this.classify=resData.data.lists
				this.selectOneClassify=this.classify[0].name
				this.selectOneClassify_id=this.classify[0].id
				await this.handleSelectOne(this.classify[0]) //获取二级分类
			},
			//获取二级分类
			async getChildTypeList(id){
				let params={}
				params.big_type_id=id
				let resData= await this.$apis.getChildTypeList(params) //获取子分类
				this.classifyTwo=resData.data.lists
				this.shopList=[]
				this.page=1
				this.is_load=0
				await this.getProductList() //获取商品列表
			},


			//选择一级分类
			async handleSelectOne(item) {
				this.selectTwoClassify = this.all_item.name
				this.selectTwoClassify_id = this.all_item.id
				this.selectOneClassify_id = item.id
				this.selectOneClassify = item.name
				await this.getChildTypeList(item.id)
			},
			//选择二级分类
			async handleSelectTwo(item) {
				this.selectTwoClassify = item.name
				this.selectTwoClassify_id = item.id
				this.shopList=[]
				this.page=1
				this.is_load=0
				await this.getProductList() //获取商品列表
			},
			// //选择全部
			// handleSelectAll(all_item) {
			// 	this.selectTwoClassify =''
			// },

			// 获取对应商品列表
			async getProductList() {
				let params={}
				params.page=this.page
				params.big_type_id=this.selectOneClassify_id
				params.product_type_id=this.selectTwoClassify_id
				let resData= await this.$apis.getIntegralProductList(params)
				this.shopList.push(...resData.data.lists) // 商品列表加载更新
				this.is_load=resData.data.is_load
			},
			handleMore(){ // 积分商城
				this.$router.push({
					route:this.$routesConfig.pointsMore
				})
			},
			handleGoodsDetail(item){
				this.$router.push({
					route:this.$routesConfig.goodsDetail,
					query:{id:item.id}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		position: relative;

		.i-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 44px;
		}

		.i-content {
			position: absolute;
			left: 0;
			right: 0;
			.i-shop {
				width: 100%;

				.n-top {
					position: relative;
					width: 100%;
					height: 100%;

					.n-title {
						width: 100%;
						text-align: center;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}

					.n-more {
						position: absolute;
						top: 50%;
						transform: translate(0, -50%);
						right: 50rpx;
						font-size: 26rpx;
						color: orange;
					}
				}
			}
		}

		.s-classify {
			.c-one-box {
				width: 100%;
				white-space: nowrap;
				padding: 10rpx;
                box-sizing: border-box;
				// height: 100rpx;
				.c-one {
					display: inline-block;
					padding: 20rpx 20rpx;
					margin: 0 20rpx;
					font-size: 28rpx;
					background-color: #ffffff;
				}

				.activeOne {
					color: orange;
				}
			}

			.c-two-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				border-top: solid 1px #B9B9B9;
				border-bottom: solid 1px #B9B9B9;

				.c-two {
					border: solid 1px #B9B9B9;
					border-radius: 5rpx;
					padding: 5rpx 10rpx;
					font-size: 26rpx;
					margin: 10rpx 20rpx;
					background-color: #ffffff;

				}

				.activeTwo {
					border: solid 1px orange;
					color: orange;
				}

				.c-all {
					border: solid 1px orange;
					color: orange;
				}
			}
		}

		.s-shop {
			width: 90%;
			margin: 0 auto;

			.s-s-box {
				display: flex;
                margin-top: 30rpx;
				.b-img {
					width: 215rpx;
					height: 128rpx;
					display: block;
					border-radius: 20rpx;
				}

				.b-con {
					padding-left: 20rpx;
					flex-grow: 1;
					.b-c-name {
						font-size: 28rpx;
						line-height: 80rpx;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 300rpx;
					}
					.b-c-stock{
						font-size: 20rpx;
						line-height: 80rpx;
						color: gray;
					}
					.b-c-stock_1{
						font-size: 24rpx;
						/*line-height: 80rpx;*/
						color: gray;
					}
				}
				.b-ji{
					flex-shrink: 0;
					font-size: 28rpx;
					line-height: 80rpx;
					color: orange;
				}
			}
		}
	}
</style>
